<template>
  <div class="analysisCss myTabClass myTypeClass components-container">
   
    <div class='chart-container'>
      <el-row :gutter="20" class="bigTitleCon">
          
          <h1>
						<span class="z_topTitle_block">产业园数据分析</span>
					</h1>
      </el-row>
      <el-row v-if="defaultDataSourceType === '0'" style="margin-top: 2em;box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px 0px, rgba(0, 0, 0, 0.04) 0px 0px">
        <el-tabs type="card" v-model="activeName" @tab-click="setHandleClick">
          <el-tab-pane label="云仓">
          	 <el-row class="bigTitleCon" style="background-color: #262544;">
			          <h1>
									<span class="z_topTitle_block">云仓经营数据统计</span>
								</h1>
			      </el-row>
           <el-row class="factoryClass" >  
            <el-col  :xs="24" :sm="12" :md="12" :lg="12"  style="text-align: center; align-items: center;">
            		<div style="font-size: 150%; margin-top: 30px;">云仓总面积：<b style="font-size: 120%;">40,000</b><span style="font-size: 70%;">（立方）</span></div>
                <chart :chartStyle="'width:100%;'" ref="houseSumChart" :option="houseSumChartOption" />
            		<div style=" margin-bottom: 20px;">仓位出租占比图示</div>
            </el-col>
            <el-col  :xs="24" :sm="12" :md="12" :lg="12"  style="text-align: center;align-items: center;">
                <div style=" margin-top: 30px;" class="myClassName">
							    <el-radio-group v-model="radio4" size="medium" @change="radio4Change">
							      <el-radio-button label="总云仓" ></el-radio-button>
							      <el-radio-button label="电商"></el-radio-button>
							      <el-radio-button label="传统"></el-radio-button>
							    </el-radio-group>
							  </div>
                <chart  ref="sucessHouseChart" :option="sucessHouseChartOption" />
            </el-col>
          </el-row>
            <el-row class="bigTitleCon"style="background: rgb(38, 37, 68); padding: 2rem 0 0 0;">
								<el-col :xs="24" :sm="17" :md="17" :lg="17" style="text-align: left;">
									<!--<b style="color: white;margin-left: 1em;">时间：</b>-->
									<el-radio-group @change="changeTime"  v-model="steelTime">
                  <el-radio-button label="4001">按天</el-radio-button>
                  <el-radio-button label="4002">按周</el-radio-button>
                  <el-radio-button label="4003">按月</el-radio-button>
                  <el-radio-button label="4004">按季度</el-radio-button>
                  <el-radio-button label="4005">按年度</el-radio-button>
                </el-radio-group>
                	<el-date-picker
                v-model="steelNewDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
              
             	</el-col>
						</el-row>
            <el-row  style="padding: 2rem 0;background-color: #262544;" >
                  <p style="font-size:1rem;color:white">云仓销售收入统计</p>
            </el-row>
            <el-row style="padding:2em 0.6em;">
								<el-col :xs="24" :sm="6" :md="6" :lg="6" style="text-align: center;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
										<div style="height: 3em; line-height: 5em; vertical-align: center;">
											<b style="color: white;margin-left: 1em;">类型：</b>
										<el-select v-model="lable" >
										    <el-option
										      v-for="item in options"
										      :key="item.value"
										      :label="item.label"
										      :value="item.value">
										    </el-option>
										</el-select>
										</div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="4" :md="4" :lg="4" style="text-align: center;border:1px solid #216BCE;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
										<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">云仓总收入:</div>
										<div style="vertical-align: center; font-size: 1.5em; color: #FF9933;"><b>100万元</b></div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="4" :md="4" :lg="4" style="text-align: center;border:1px solid #216BCE;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
										<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">传统仓收入:</div>
										<div style="vertical-align: center; font-size: 1.5em; color: #FF9933;"><b>60万元</b></div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="4" :md="4" :lg="4" style="text-align: center;border:1px solid #216BCE;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
										<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">电商仓收入:</div>
										<div style="vertical-align: center; font-size: 1.5em; color: #FF9933;"><b>40万元</b></div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="6" :md="6" :lg="6" style="text-align: right;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;">
										<div style="height: 4em; line-height: 3em; font-size: 1.5em; vertical-align: center;"><b style=" color: #FF9933;"></b>&nbsp;&nbsp;</div>
									</div>
								</el-col>
							</el-row>
           <!--<el-row class="bigTitleCon"style="margin: 1em 0em 0em;">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
									<b style="color: white;margin-left: 1em;">类型：</b>
									<el-select  v-model="kfArrItem" >
                              <el-option
                                v-for="item in kfArr"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                              </el-option>
                      </el-select>
             		</el-col>
						</el-row>
            <el-row class="factoryClass" >  
                 <el-col class="mayel-radio-group" :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
                        <div class="rowCon">
                          <div class="rowItem" style="width:100%" :xs="24" :sm="6" :md="6" :lg="6" v-for="(saleItem,index) in todayKfValue" :key="index" >
                            <p>{{saleItem.text}}</p>
                             <p style="font-size:2rem;color:#FDB151">{{saleItem.val+saleItem.unit}}
                              <span><icon-svg :icon-class="saleItem.line"  :iconStyle="'color:green;width:1.5rem;height:2rem'"></icon-svg></span>
                            </p>

                          </div>
                        </div>
                  </el-col>
            </el-row>-->
            <el-row class="factoryClass">  
                  <el-col  class="mayel-radio-group" :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
                      <div class="tableCon" style="500px">
                          <chart  :chartStyle="'height:200px'"  ref="kcChart" :option="kcChartOption" />
                      </div>
                  </el-col>
            </el-row>
             <el-row  style="padding: 2rem 0 0 0px;background-color: #262544;" >
                  <el-col  :xs="24" :sm="12" :md="12" :lg="12">
                    <p style="font-size:1rem;color:white">云仓到货统计</p>
                    <el-col class="mayel-radio-group factoryClass" :xs="24" :sm="24" :md="24" :lg="24">
                      <div class="tableCon">
                      		<h3 style="margin-left: 10px;">云仓入库总计：</h3>
                      		<div style="width: 100%; margin: 1.2rem 1rem;">
                      			<div style="width: 30%;display: inline-block;">
                      				<span>到货方数：</span>
                      				<b style="font-size: 160%; color: #FF9933;">{{CloudInStorehouseData.arrivals}}</b>
                      			</div>
                      			<div style="width: 30%;display: inline-block;">
                      				<span>到货单数：</span>
                      				<b style="font-size: 160%; color: #FF9933;">{{CloudInStorehouseData.arrivalsCount}}</b>
                      			</div>
                      			<div style="width: 30%;display: inline-block;">
                      				<span>卸载量：</span>
                      				<b style="font-size: 160%; color: #FF9933;">{{CloudInStorehouseData.loadingAndUnloading}}</b>
                      			</div>
                      		</div>
                          <chart   ref="areaChart" :option="areaChartOption" />
                      </div>
                    </el-col>
                  </el-col>
                  <el-col  :xs="24" :sm="12" :md="12" :lg="12">
                    <p style="font-size:1rem;color:white">云仓库存统计</p>
                    <el-col class="mayel-radio-group factoryClass" :xs="24" :sm="24" :md="24" :lg="24">
                      <div class="tableCon">
                      	<h3 style="margin-left: 10px;">云仓库存统计：</h3>
                      	<div style="width: 100%; margin: 1.2rem 1rem;">
                      			<div style="width: 30%;display: inline-block;">
                      				<span>库存件数：</span>
                      				<b style="font-size: 160%; color: #FF9933;">{{CloudStockData.stock}}</b>
                      			</div>
                      			<div style="width: 30%;display: inline-block;">
                      				<span>库存立方数：</span>
                      				<b style="font-size: 160%; color: #FF9933;">{{CloudStockData.stockCount}}</b>
                      			</div>
                      		</div>
                          <chart   ref="areaMoneyChart" :option="areaMoneyChartOption" />
                      </div>
                    </el-col>
                  </el-col>
            </el-row>
             <el-row  style="padding: 2rem 0 0 0px;background-color: #262544;" >
                  <!--<el-col  :xs="24" :sm="12" :md="12" :lg="12">
                    <p style="font-size:1rem;color:white">云仓发货量统计</p>
                    <el-col class="mayel-radio-group factoryClass" :xs="24" :sm="24" :md="24" :lg="24">
                      <div class="tableCon" style="500px">
                          <chart   ref="newHouseChart" :option="newHouseChartOption" />
                      </div>
                    </el-col>
                  </el-col>
                  <el-col  :xs="24" :sm="12" :md="12" :lg="12">-->
                    <p style="font-size:1rem;color:white">云仓发货量统计</p>
                    <el-col class="mayel-radio-group factoryClass" :xs="24" :sm="24" :md="24" :lg="24">
                      <div class="tableCon" style="500px">
                      	<h3 style="margin-left: 10px;">云仓发货量总计：<b style="font-size: 160%; color: #FF9933;">300</b></h3>
                      	<div style="width: 100%; margin: 1.2rem 1rem;">
                      			<div style="width: 20%;display: inline-block;">
                      				<span>推送单数：</span>
                      				<b style="font-size: 160%; color: #FF9933;">60</b>
                      			</div>
                      			<div style="width: 20%;display: inline-block;">
                      				<span>自营电商单数：</span>
                      				<b style="font-size: 160%; color: #FF9933;">40</b>
                      			</div>
                      			<div style="width: 20%;display: inline-block;">
                      				<span>入驻电商单数：</span>
                      				<b style="font-size: 160%; color: #FF9933;">60</b>
                      			</div>
                      			<div style="width: 20%;display: inline-block;">
                      				<span>传统仓单数：</span>
                      				<b style="font-size: 160%; color: #FF9933;">40</b>
                      			</div>
                      		</div>
                           <chart   ref="areaSuccessChart" :option="areaSuccessChartOption" />
                      </div>
                    </el-col>
                  <!--</el-col>-->
            </el-row>
                    <el-col class="mayel-radio-group factoryClass" :xs="24" :sm="24" :md="24" :lg="24">   
                      <div class="tableCon" style="500px">
                           <bmap    style="width:200px;heigth:200px" />
                      </div>
                    </el-col>
          </el-tab-pane>
          <el-tab-pane label="电商">
          	<div class='chart-container'>
							<!--<el-row :gutter="20" style="padding-top: 2em;background: #262544;">
								<el-col v-for="item in topTargetData" :key="item.title" :xs="24" :sm="6" :md="6" :lg="6"  style="text-align: center;">
									<div :style="{background:item.color}" style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0; border-radius: 1em;">
										<div style="float: left; margin-left: 10%; width: 5em; height: 5em; border-radius: 50%;background: white">
												<icon-svg :icon-class="item.img"  :iconStyle="'width:80%;height:100%;color:'+item.color"></icon-svg>
										</div>						
										<div style="float: left; width: 50%;">
											<div style="vertical-align: center; font-size: 1.5em;height: 2em; line-height: 2em;"><b>{{item.value}}</b></div>
											<div style="vertical-align: center;">{{item.title}}</div>
										</div>
									</div>
								</el-col>
							</el-row>-->
								<!--<el-row class="bigTitleCon"style="padding:3em 1em;background: #262544;">
									<el-col :xs="24" :sm="8" :md="8" :lg="8" style="text-align: left;">
										<b class="z_topTitle_block" style="margin-left: 0px; margin-right: 0px; font-size: 1.3em;">区域任务完成率</b>
									</el-col>
									<el-col :xs="24" :sm="16" :md="16" :lg="16" style="text-align: right;padding-right: 1em;">
										<el-radio-group size="small" v-model="radio3">
										    <el-radio-button label="按天"></el-radio-button>
										    <el-radio-button label="按周"></el-radio-button>
										    <el-radio-button label="按月"></el-radio-button>
										    <el-radio-button label="按季度"></el-radio-button>
										    <el-radio-button label="按年度"></el-radio-button>
										</el-radio-group>
									</el-col>
								</el-row>-->
								<!--<div style="border: 2px solid #216BCE;border-radius: 1em;">
							<el-row class="bigTitleCon"style="padding-bottom: 1em;">
								<el-col class="mayel-radio-group" :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
									<el-radio-group text-color="white" fill="#339966" v-model="qyradio">
										    <el-radio-button label="0">全部</el-radio-button>
										    <el-radio-button label="1">涧西东区</el-radio-button>
										    <el-radio-button label="2">涧西西区</el-radio-button>
										    <el-radio-button label="3">西工区</el-radio-button>
										    <el-radio-button label="4">老城区</el-radio-button>
										    <el-radio-button label="5">洛龙东区</el-radio-button>
										    <el-radio-button label="6">洛龙西区</el-radio-button>
									</el-radio-group>
								</el-col>
							</el-row>
							<el-row style="padding:0 0.6em;">
								<el-col :xs="24" :sm="6" :md="6" :lg="6" style="text-align: center;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
										<div style="height: 3em; line-height: 5em; vertical-align: center;">
											<b style="color: white;margin-left: 1em;">指标：</b>
										<el-select v-model="lable" >
										    <el-option
										      v-for="item in options"
										      :key="item.value"
										      :label="item.label"
										      :value="item.value">
										    </el-option>
										</el-select>
										</div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="3" :md="3" :lg="3" style="text-align: center;border:1px solid #216BCE;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
										<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">本周任务:</div>
										<div style="vertical-align: center; font-size: 1.5em; color: #FF9933;"><b>10单</b></div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="3" :md="3" :lg="3" style="text-align: center;border:1px solid #216BCE;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
										<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">已完成:</div>
										<div style="vertical-align: center; font-size: 1.5em; color: #FF9933;"><b>5单</b></div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="3" :md="3" :lg="3" style="text-align: center;border:1px solid #216BCE;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
										<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">未完成:</div>
										<div style="vertical-align: center; font-size: 1.5em; color: #FF9933;"><b>5单</b></div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="3" :md="3" :lg="3" style="text-align: center;border:1px solid #216BCE;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
										<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">任务完成率:</div>
										<div style="vertical-align: center; font-size: 1.5em; color: #FF9933;"><b>50%</b><icon-svg icon-class="up"  :iconStyle="'color:green;width:1.5rem;height:2rem'"></icon-svg></div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="6" :md="6" :lg="6" style="text-align: right;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;">
										<div style="height: 4em; line-height: 3em; font-size: 1.5em; vertical-align: center;"><b style=" color: #FF9933;"></b>&nbsp;&nbsp;</div>
									</div>
								</el-col>
							</el-row>
							<div class="tableCon">
								<div style="margin: 1em; text-align: center; font-size: 1.5em; color: #ccc;" >
									任务完成率分析图
								</div>
								<chart  :chartStyle="'height:200px'"  ref="qyChart" :option="qyChartOption" />
							</div>
						</div>-->
						</div>
						<!--<el-row :gutter="20"  style="padding: 2rem 0px;background-color: #262544;" >
                  <el-col  :xs="24" :sm="12" :md="12" :lg="12">
                    <b class="z_topTitle_block" style="margin-left: 10px; margin-right: 0px; font-size: 1.3em;">区域佣金回款</b>
                  </el-col>
                  <el-col  :xs="24" :sm="12" :md="12" :lg="12">
                    <b class="z_topTitle_block" style="margin-left: 10px; margin-right: 0px; font-size: 1.3em;">区域门店分布</b>
                  </el-col>
            </el-row>-->
						<!--<el-row :gutter="20"  style="background-color: #262544;" >
                  <el-col  :xs="24" :sm="12" :md="12" :lg="12">
                  	<div class="tableCon" style="background: #151531;">
                      <chart ref="yjChart" :option="yjChartOption" />
                    </div>
                  </el-col>
                  <el-col  :xs="24" :sm="12" :md="12" :lg="12">
                  	<div class="tableCon" style="background: #151531;">
                      <chart ref="fbChart" :option="fbChartOption" /> 
                    </div>
                  </el-col>
            </el-row>-->
            <!--<el-row :gutter="20"  style="padding: 2rem 0px;background-color: #262544;" >
                  <el-col  :xs="24" :sm="12" :md="12" :lg="12">
                    <b class="z_topTitle_block" style="margin-left: 10px; margin-right: 0px; font-size: 1.3em;">区域销量排名</b>
                  </el-col>
                  <el-col  :xs="24" :sm="12" :md="12" :lg="12">
                    <b class="z_topTitle_block" style="margin-left: 10px; margin-right: 0px; font-size: 1.3em;">门店销量排名</b>
                  </el-col>
            </el-row>-->
						<!--<el-row :gutter="20"  style="background-color: #262544;" >
                  <el-col  :xs="24" :sm="12" :md="12" :lg="12" class="mayel-radio-group factoryClass noBorderClass" >
                              <el-tabs style="padding:20px 0 0 10px" type="card" v-model="allPersonActiveName" @tab-click="setAllPersonClick"> 
                                <el-tab-pane label="成交量">
                                    <chart :chartStyle="'min-height:100px;height:27rem'"  ref="qyxlChart" :option="qyxlChartOption" />
                                </el-tab-pane>
                                <el-tab-pane label="回款">
                                  <div class="tableCon" style="background: #151531;">
                                    <chart :chartStyle="'min-height:100px;height:27rem'"  ref="qyxlChart0" :option="qyxlChartOption0" />
                                  </div>  
                                </el-tab-pane>
                                <el-tab-pane label="任务完成率">
                                  <div class="tableCon" style="background: #151531;">
                                    <chart :chartStyle="'min-height:100px;height:27rem'"  ref="qyxlChart1" :option="qyxlChartOption1" />
                                  </div> 
                                </el-tab-pane>
                              </el-tabs>
                  </el-col>
                  <el-col  :xs="24" :sm="12" :md="12" :lg="12" class="mayel-radio-group factoryClass noBorderClass">
                     <el-tabs style="padding:20px 0 0 10px" type="card" v-model="allPersonActiveNameOn" @tab-click="setAllPersonClickOn"> 
                                <el-tab-pane label="成交量">
                                  <div class="tableCon" style="background: #151531;">
                                    <chart ref="mdxlChart" :option="mdxlChartOption" /> 
                                  </div>
                                </el-tab-pane>
                                <el-tab-pane label="回款">
                                  <div class="tableCon" style="background: #151531;">
                                    <chart ref="mdxlChart0" :option="mdxlChartOption0" /> 
                                  </div> 
                                </el-tab-pane>
                                <el-tab-pane label="任务完成率">
                                  <div class="tableCon" style="background: #151531;">
                                  <chart ref="mdxlChart1" :option="mdxlChartOption1" /> 
                                </div> 
                                </el-tab-pane>
                      </el-tabs>
                  </el-col>
            </el-row>-->
          </el-tab-pane>
          <el-tab-pane label="物流"></el-tab-pane>
          <el-tab-pane label="孵化器"></el-tab-pane>
        </el-tabs>
      </el-row>
    </div>
  </div>

</template>
<script>
import echarts from "echarts";
import chart from "../../../../components/Charts/chart";
import bmap from "./bmap";
export default {
  data() {
    return {
    	CloudStockData:{},
    	CloudInStorehouseData:{},
      lable: "0",
      radio4:"总云仓",
      allPersonActiveNameOn:'0',
      mdxlChartOption1:{},
      mdxlChartOption0:{},
      qyxlChartOption0:{},
      qyxlChartOption1:{},
      newHouseChartOption: {},
      areaSuccessChartOption: {},
      stockPriceChartOption: {},
      areaMoneyChartOption: {},
      areaChartOption: {},
      qyradio: 0,
      sucessHouseChartOption: {},
      houseSumChartOption: {},
      options: [
        {
          value: "0",
          label: "所有云仓"
        },
        {
          value: "1",
          label: "传统仓"
        },
        {
          value: "2",
          label: "电商仓"
        }
      ],
      topTargetData: [
        {
          title: "线下门店套数(套)",
          value: "78",
          color: "#339966",
          img: "hehuoren"
        },
        {
          title: "门店人数(人)",
          value: "300",
          color: "#9933CC",
          img: "baobeikehu"
        },
        {
          title: "销售回款(元)",
          value: "22,386",
          color: "#6666FF",
          img: "renshu"
        },
        {
          title: "任务完成率(%)",
          value: "56%",
          color: "#FF9933",
          img: "yongjin"
        }
      ],
      steelTypeArr: [
        {
          type: "螺纹",
          val: "222",
          count: "20",
          money: "3000"
        },
        {
          type: "盘螺",
          val: "222",
          count: "20",
          money: "3000"
        },
        {
          type: "线材",
          val: "222",
          count: "20",
          money: "3000"
        },
        {
          type: "钢坯",
          val: "222",
          count: "20",
          money: "3000"
        }
      ],
      kcChartOption: {},
      qyChartOption: {},
      yjChartOption: {},
      fbChartOption: {},
      qyxlChartOption: {},
      mdxlChartOption: {},
      factoryHaveMoneyArr: [
        {
          secFactory: "郑州分公司",
          value: "10000",
          dataList: [
            {
              name: "业务经理",
              kh: "郑州中粮",
              val: "1522",
              time: "2天"
            }
          ]
        },
        {
          secFactory: "武汉分公司",
          value: "30000",
          dataList: [
            {
              name: "业务经理",
              kh: "郑州中粮",
              val: "1522",
              time: "190天"
            }
          ]
        },
        {
          secFactory: "洛阳分公司",
          value: "40000",
          dataList: [
            {
              name: "业务经理",
              kh: "郑州中粮",
              val: "1522",
              time: "20天"
            }
          ]
        },
        {
          secFactory: "合肥分公司",
          value: "20000",
          dataList: [
            {
              name: "业务经理",
              kh: "郑州中粮",
              val: "1522",
              time: "30天"
            }
          ]
        },
        {
          secFactory: "西南分公司",
          value: "20000",
          dataList: [
            {
              name: "业务经理",
              客户: "郑州中粮",
              val: "1522",
              time: "6天"
            }
          ]
        },
        {
          secFactory: "广州分公司",
          value: "20000",
          dataList: [
            {
              name: "业务经理",
              客户: "郑州中粮",
              val: "1522",
              time: "211天"
            }
          ]
        },
        {
          secFactory: "西安分公司",
          value: "20000",
          dataList: [
            {
              name: "业务经理",
              客户: "郑州中粮",
              val: "1522",
              time: "212天"
            }
          ]
        },
        {
          secFactory: "无锡分公司",
          value: "20000",
          dataList: [
            {
              name: "业务经理",
              客户: "郑州中粮",
              val: "1522",
              time: "21天"
            }
          ]
        }
      ],
      factoryHaveMoneyColorArr: [
        "#7553dc",
        "#5282e6",
        "#abdb9d",
        "#3eb37f",
        "#feca64",
        "#ff8548",
        "#fe6468",
        "#e371b7"
      ],
      factoryHanveMoneyCount: 0,
      factoryHaveMoneyChartRote: null,
      factoryMoneyAssetTurnoverArr: [{ text: "郑州分公司", val: "35%", value: "2" }],
      todayKfValue: [
        {
          text: "本月成交套数",
          val: "100",
          unit: "套",
          line: "up"
        },
        {
          text: "环比",
          val: "0.6",
          line: "up",
          unit: "%"
        },
        {
          text: "本周成交均价",
          val: "7000",
          unit: "元/m²",
          line: "up"
        },
        {
          text: "环比",
          val: "0.6",
          line: "up",
          unit: "%"
        }
      ],
      steelTypeChartOption: {}, //钢材类型
      factoryStorckDistributeChartOption: {}, //厂家库存分布
      factoryOther: false,
      factoryDefault: "0", //厂家名字
      factoryAllArr: ["盘螺", "螺纹钢", "线材", "钢坯"],
      factoryStockTimeDimensionality: "0", //时间维度
      factoryStockDay: "0",
      mapChart: null,
      checked: false,
      isShow: false,
      contrastDate: "",
      contrastDateOption: "",
      contrast: false,
      daysSel: "0",
      placeholder1: "销量",
      showFiltBool: false,
      filterType: "按销量",
      moneyValueChartOption: {},
      pickerOptions2: "",
      factoryChartOption: {},
      steelNewDate: new Date(),
      steelTime: "4001",
      itemFactory: [],
      defaultDataSourceType: "0",
      dataSourceType: [
        {
          label: "内部系统",
          value: "0"
        },
        {
          label: "钢圈",
          value: "1"
        }
      ],
      timerRadioArr: ["当天", "本月", "本季度", "本年度"],
      saleOptionDataArr: [],
      kfArr: [
        {
          value: "0",
          label: "新房"
        },
        {
          value: "1",
          label: "二手房"
        },
        {
          value: "2",
          label: "租房"
        },
        {
          value: "3",
          label: "代办"
        },
        {
          value: "4",
          label: "金融"
        }
      ],
      kfArrItem: "0",
      getMoneyPropoOption: {}, //应收款占比
      initDataArr: [],
      activeName: "0",
      topDate: "",
      factoryHaveMoneyOption: {}
    };
  },
  components: {
    chart,
    bmap
  },
  watch: {},
  methods: {
    setAllPersonClick(){
      this.qyxlChart0()
      this.qyxlChart()
      this.qyxlChart1()
    },
    setAllPersonClickOn(){
      this.mdxlChart1()
      this.mdxlChart0()
      this.mdxlChart()
    },
    newHouseChart() {
      var xData = ["涧西", "西工", "洛龙", "老城", "瀍河"];
      var data1 = {
        data: [30, 26, 28, 62, 28],
        type: "bar"
      };
      var data2 = {
        data: [11, 22, 26, 33, 66],
        type: "bar"
      };
      var data3 = {
        data: [12, 323, 44, 88, 66],
        type: "bar"
      };
      var initData = {
        //需要给我传的数据
        exchange: true, //xy轴数据互换
        xData: xData,
        yData: [data1, data2, data3],
        color: ["#0386D1", "#FEAA40", "#FA4361"],
        legend: ["新房", "二手房", "租房"],
        refName: "newHouseChart",
        returnOption: "newHouseChartOption",
        textColor: "white",
        stack: "one",
        yAxisName:"增量",
        xAxisName:'区域',
        grid:{
          right:'10%'
        },
        xAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        }
      };
      this.forEachFun(initData);
    },
    areaSuccessChart() {
      var xData = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
      var data1 = {
        data: [30, 26, 28, 62, 28, 15, 15],
        type: "bar"
      };
      var data2 = {
        data: [11, 22, 26, 33, 66, 88, 88],
        type: "bar"
      };
      var data3 = {
        data: [12, 323, 44, 88, 66, 55, 55],
        type: "bar"
      };
      var data4 = {
        data: [34, 44, 34, 55, 56, 67, 87],
        type: "bar"
      };
      var initData = {
        //需要给我传的数据
        xData: xData,
        grid:{
          right:'8%',
          left:'8%',
          bottom:'20%',
        },
        yData: [data1, data2, data3, data4],
        color: ["#0386D1", "#FEAA40", "#FA4361", "red"],
        legend: ["推送单数", "自营电商", "入驻电商", "传统仓"],
        refName: "areaSuccessChart",
        returnOption: "areaSuccessChartOption",
        textColor: "white",
        stack: "one",
        xAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        }
      };
      this.forEachFun(initData);
    },
    resetData3(xData , data1 , data2){
    	var initData = {
        //需要给我传的数据
        xData: xData,
        yData: [data2, data1],
        legend: ["库存件数", "库存立方数"],
        textColor: "white",
        color: ["#0386D1", "#FEAA40"],
        grid: [
          {
            left: "10%",
            right: "10%",
            top: "8%"
          }
        ],
        title: [
          {
            // text: '成交房源',
            left: "1%",
            top: "6%",
            textStyle: {
              color: "white"
            }
          }
        ],
        yAxisName: "",
        refName: "areaMoneyChart",
        returnOption: "areaMoneyChartOption",
        xAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        }
      };
      this.forEachFun(initData);
    },
    areaMoneyChart() {
    	var xData = [];
      var data1 = {
        data: [],
        type: "bar",
        barWidth:20
      };
      var data2 = {
        data: [],
        type: "bar",
        barWidth:20
      };
    	var url = this.$api.GetCloudStock 
    	var d = {
						"timeAccuracy": this.steelTime
					}
					this.$fetch({
						url,
						method: 'post',
						data: this.$qs.stringify(d)
					}).then(resData => {
							for(var i = 0; i < resData.data.result.length; i++){
									xData.push(resData.data.result[i].cloudStoreTypeName)
									data1.data.push(resData.data.result[i].stockCount)
									data2.data.push(resData.data.result[i].stock)
									if(resData.data.result[i].cloudStoreTypeName == "总云仓"){
										this.CloudStockData = resData.data.result[i]
									}
							}
							this.resetData3(xData , data1 , data2)
					}).catch(err => {
						console.log(err)
					});
      
    },
    
    areaChart() {
    	 var xData = [];
      var data1 = {
        data: [],
        type: "bar",
        barWidth:20
      };
      var data2 = {
        data: [],
        type: "bar",
        barWidth:20
      };
    	var url = this.$api.GetCloudInStorehouse 
    	var d = {
						"timeAccuracy": this.steelTime
					}
					this.$fetch({
						url,
						method: 'post',
						data: this.$qs.stringify(d)
					}).then(resData => {
						console.log("---------")
						console.log(resData.data.result)
						console.log("---------")
						
							for(var i = 0; i < resData.data.result.length; i++){
									if(resData.data.result[i].cloudStoreTypeName == '电商'){
										xData.push(resData.data.result[i].cloudStoreTypeName)
										data1.data = [resData.data.result[i].arrivals , resData.data.result[i].arrivalsCount , resData.data.result[i].loadingAndUnloading]
									}else if(resData.data.result[i].cloudStoreTypeName == '传统'){
										xData.push(resData.data.result[i].cloudStoreTypeName)
										data2.data = [resData.data.result[i].arrivals , resData.data.result[i].arrivalsCount , resData.data.result[i].loadingAndUnloading]
									}else{
										this.CloudInStorehouseData = resData.data.result[i]
									}
							}
							this.resetData2(xData , data1 , data2)
					}).catch(err => {
						console.log(err)
					});
    },
    resetData2(xData , data1 , data2){
    	var initData = {
        //需要给我传的数据
        xData: xData,
        yData: [data1 , data2],
        exchange: true, //xy轴数据互换
        legend: ["到货方数" , "到货单数" , "装卸量"],
        legendShow: true,
        textColor: "white",
        color: [
          "#0386D1",
          "#FEAA40",
          "#F86F39",
          "#FA4361",
          "#34AE73",
          "#5ECED8"
        ],
        grid: [
          {
            left: "10%",
            right: "10%",
            bottom:"20%",
            top:"5%"
          }
        ],
        yAxisName: "",
        refName: "areaChart",
        returnOption: "areaChartOption",
        xAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        }
      };
      this.forEachFun(initData);
    },
    resetData(data){
    	var xData = ["销售收入(万元)", "到货量(立方)", "发货量(单)", "库存(立方)"];
    	var data1 = {
    		data:[],
    		type:"bar"
    	}
    	for(var i = 0; i < data.length; i++){
    		if(this.radio4 == data[i].cloudStoreTypeName){
    			data1.data = [data[i].salesRevenue , data[i].arrivals , data[i].deliveringAmount , data[i].stock]
    		}
    	}
//  	var xData = ["销售收入(万元)", "到货量(立方)", "发货量(单)", "库存(立方)"];
//    var data1 = {
//      data: [30, 26, 28, 62],
//      type: "bar"
//    };
      var initData = {
        //需要给我传的数据
        xData: xData,
        yData: [data1],
        exchange: true, //xy轴数据互换
        legend: [],
        textColor: "white",
        grid: [
          {
            left: "20%",
            right: "5%",
            top: "10%"
          }
        ],
        title: [
          {
//          text: this.radio4,
            left: "1%",
            top: "6%",
            textStyle: {
              color: "white"
            }
          }
        ],
        //yAxisName: "成交量(套)",
        linearColor: [
          //渐变颜色，
          {
            startColor: "#fec05f",
            endColor: "#ff7d4f"
          },
          {
            startColor: "rgba(248, 111, 57,1)",
            endColor: "rgba(248, 111, 57,0.2)"
          }
        ], //渐变色
        refName: "sucessHouseChart",
        returnOption: "sucessHouseChartOption",
        xAxisLine: {
          show: false,
          axisLabel: {
          	show: false,
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxisLine: {
          show: false,
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        }
      };
      this.forEachFun(initData);
    },
    radio4Change(){
    	this.sucessHouseChart()
    },
    sucessHouseChart() {
    	var url = this.$api.GetIndustrialParkOperatingData 
					this.$fetch({
						url,
						method: 'post'
					}).then(resData => {
						console.log(resData.data.result)
						this.resetData(resData.data.result)
					}).catch(err => {
						console.log(err)
					});
    },
    houseSumChart() {
      var data = [
        { value: 10000, name: "电商仓面积", type: "pie" },
        { value: 5000, name: "未出租仓面积", type: "pie" },
        { value: 25000, name: "传统仓面积", type: "pie" }
      ];
      var initData = {
        //需要给我传的数据
        yData: [data],
        color: ["#0288D1", "#F2AA50", "#F5415F"],
        pieName: "仓位出租占比",
        legend: [],
        refName: "houseSumChart",
        returnOption: "houseSumChartOption",
        textColor: "white",
        radius: "80%",
        center: ["50%", "50%"],
        label: {
          normal: {
            position: "inner",
            formatter: "{b}\n\n{d}%\n\n {c}(套) ",
            fontSize: 15
          }
        }
      };
      this.forEachFun(initData);
    },
     mdxlChart1() {
      var xData = [
        "老城四店",
        "洛龙三店",
        "洛龙二店",
        "老城三店",
        "老城一店",
        "西工二店",
        "涧西一店"
      ];
      var data1 = {
        data: [ 50,45,40,35,30, 30, 26,],
        type: "bar",
        barWidth: 20
      };
      var data2 = {
        data: [60, 70, 55, 78, 102, 105, 50],
        type: "line"
      };
      var initData = {
        //需要给我传的数据
        xData: xData,
        yData: [data1, data2],
        legend: ["实际完成率", "计划完成率"],
        textColor: "white",
        linearColor: [
          //渐变颜色，
          {
            startColor: "#fec05f",
            endColor: "#ff7d4f"
          },
          {
            startColor: "rgba(248, 111, 57,1)",
            endColor: "rgba(248, 111, 57,0.2)"
          }
        ], //渐变色
        refName: "mdxlChart1",
        returnOption: "mdxlChartOption1",
        yAxisName: "实际完成率(%)",
        grid:{
          right:"8%"
        },
        yAxis: {
          name: "计划完成率(%)",
          type: "value",
          nameLocation: "end",
          nameTextStyle: {
            color: "white"
          },
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "white"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "white"
            }
          }
        },
        xAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        }
      };
      this.forEachFun(initData);
    },
     mdxlChart0() {
      var xData = [
        "老城四店",
        "洛龙三店",
        "洛龙二店",
        "老城三店",
        "老城一店",
        "西工二店",
        "涧西一店"
      ];
      var data1 = {
        data: [ 50,45,40,35,30, 30, 26,],
        type: "bar",
        barWidth: 20
      };
      var data2 = {
        data: [60, 70, 55, 78, 102, 105, 50],
        type: "line"
      };
      var initData = {
        //需要给我传的数据
        xData: xData,
        yData: [data1, data2],
        legend: ["实际回款", "计划回款"],
        textColor: "white",
        linearColor: [
          //渐变颜色，
          {
            startColor: "#fec05f",
            endColor: "#ff7d4f"
          },
          {
            startColor: "rgba(248, 111, 57,1)",
            endColor: "rgba(248, 111, 57,0.2)"
          }
        ], //渐变色
        refName: "mdxlChart0",
        returnOption: "mdxlChartOption0",
        yAxisName: "实际回款(元)",
        grid:{
          right:"8%"
        },
        yAxis: {
          name: "计划回款(元)",
          type: "value",
          nameLocation: "end",
          nameTextStyle: {
            color: "white"
          },
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "white"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "white"
            }
          }
        },
        xAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        }
      };
      this.forEachFun(initData);
    },
    mdxlChart() {
      var xData = [
        "老城四店",
        "洛龙三店",
        "洛龙二店",
        "老城三店",
        "老城一店",
        "西工二店",
        "涧西一店"
      ];
      var data1 = {
        data: [ 50,45,40,35,30, 30, 26,],
        type: "bar",
        barWidth: 20
      };
      var data2 = {
        data: [60, 70, 55, 78, 102, 105, 50],
        type: "line"
      };
      var initData = {
        //需要给我传的数据
        xData: xData,
        yData: [data1, data2],
        legend: ["成交量", "成交均价"],
        textColor: "white",
        linearColor: [
          //渐变颜色，
          {
            startColor: "#fec05f",
            endColor: "#ff7d4f"
          },
          {
            startColor: "rgba(248, 111, 57,1)",
            endColor: "rgba(248, 111, 57,0.2)"
          }
        ], //渐变色
        refName: "mdxlChart",
        returnOption: "mdxlChartOption",
        yAxisName: "成交量(套)",
        grid:{
          right:"8%"
        },
        yAxis: {
          name: "成交均价(元)",
          type: "value",
          nameLocation: "end",
          nameTextStyle: {
            color: "white"
          },
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "white"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "white"
            }
          }
        },
        xAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        }
      };
      this.forEachFun(initData);
    },
    qyxlChart1(){
       var xData = ["西工区", "瀍河区", "老城区", "涧西东区", "涧西西区", "洛龙西区", "洛龙东区"];
      var data1 = {
            data: [15, 22, 23, 25, 28, 28, 30],
            type: "bar",
            barWidth: 30
      };
      var initData = {
        //需要给我传的数据
        xData: xData,
        yData: [data1],
        exchange: true, //xy轴数据互换
        legend: [],
        textColor: "white",
        color: ["#0386D1", "#FEAA40", "#FA4361"],
        refName: "qyxlChart1",
        returnOption: "qyxlChartOption1",
        yAxisName: "实际完成率(%)",
        grid:{
          right:'12%',
          top:'0%'
        },
        xAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        }
      };
      this.forEachFun(initData);
    },
    qyxlChart0(){
       var xData = ["西工区", "瀍河区", "老城区", "涧西东区", "涧西西区", "洛龙西区", "洛龙东区"];
      var data1 = {
            data: [15, 22, 23, 25, 28, 28, 30],
            type: "bar",
            barWidth: 30
      };
      var initData = {
        //需要给我传的数据
        xData: xData,
        yData: [data1],
        exchange: true, //xy轴数据互换
        legend: [],
        textColor: "white",
        color: ["#0386D1", "#FEAA40", "#FA4361"],
        refName: "qyxlChart0",
        returnOption: "qyxlChartOption0",
        yAxisName: "实际回款(元)",
        grid:{
          right:'12%',
          top:'0%'
        },
        xAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        }
      };
      this.forEachFun(initData);
    },
    qyxlChart() {
      var xData = ["西工区", "瀍河区", "老城区", "涧西东区", "涧西西区", "洛龙西区", "洛龙东区"];
      var data1 = {
            data: [15, 22, 23, 25, 28, 28, 30],
            type: "bar",
            barWidth: 30
      };
      var initData = {
        //需要给我传的数据
        xData: xData,
        yData: [data1],
        exchange: true, //xy轴数据互换
        legend: [],
        textColor: "white",
        color: ["#0386D1", "#FEAA40", "#FA4361"],
        refName: "qyxlChart",
        returnOption: "qyxlChartOption",
        yAxisName: "销量(套)",
        grid:{
          right:'8%',
          top:'0%'
        },
        xAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        }
      };
      this.forEachFun(initData);
    },
    kcChart() {
      var xData = [
        "10-24周一",
        "10-25周二",
        "10-26周三",
        "10-27周四",
        "10-28周五",
        "10-29周六",
        "10-30周日"
      ];
      var data1 = {
        data: [30, 26, 28, 62, 28, 15, 10],
        type: "line"
      };
      var data2 = {
        data: [50, 80, 34, 76, 99, 56, 23],
        type: "line"
      };
      var data3 = {
        data: [50, 80, 70, 46, 54, 56, 33],
        type: "line"
      };
      var initData = {
        //需要给我传的数据
        xData: xData,
        yData: [data1, data2, data3],
        legend: ["装卸费" , "服务费" , "仓位费"],
        unit:"万元",
        textColor: "white",
//      linearColor: [
//        //渐变颜色，
//        {
//          startColor: "#fec05f",
//          endColor: "#ff7d4f"
//        },
//        {
//          startColor: "rgba(248, 111, 57,1)",
//          endColor: "rgba(248, 111, 57,0.2)"
//        },
//        {
//          startColor: "rgba(248, 111, 57,1)",
//          endColor: "rgba(248, 111, 57,0.2)"
//        }
//      ], //渐变色
					color:["red","blue","yellow"],
        refName: "kcChart",
        returnOption: "kcChartOption",
        yAxisName: "云仓销售收入(万元)",
        grid: [
          {
            left: "7%",
            right: "7%",
            top: "10%"
          }
        ],
        yAxis: {
          name: "成交均价(元/m²)",
          type: "value",
          nameLocation: "end",
          nameTextStyle: {
            color: "white"
          },
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "white"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "white"
            }
          }
        },
        xAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        }
      };
      this.forEachFun(initData);
    },
    fbChart() {
      var data = [
        { value: 13, name: "洛龙", type: "pie" },
        { value: 5, name: "涧西", type: "pie" },
        { value: 8, name: "瀍河", type: "pie" },
        { value: 5, name: "西工", type: "pie" },
        { value: 14, name: "老城", type: "pie" }
      ];
      var initData = {
        //需要给我传的数据
        yData: [data],
        color: ["#0288D1", "#F2AA50", "#F5415F", "#FE8652", "#5A8FFD"],
        pieName: "区域门店分布",
        legend: ["洛龙", "涧西", "瀍河", "西工", "老城"],
        refName: "fbChart",
        returnOption: "fbChartOption",
        textColor: "white",
        radius: ["50%", "80%"],
        center: "50%",
        unit: "家",
        title: {
                text:'总考生数',
                left:'center',
                top:'53%',
                padding:[24,0],
                textStyle:{
                    color:'#fff',
                    fontSize:18,
                    align:'center'
                }
            },
        label: {
          normal: {
            position: "inner",
            formatter: "{b}\n\n{c}\r家 ",
            fontSize: 15
          }
        }
      };
      this.forEachFun(initData);
    },
    yjChart() {
      var xData = ["涧西西区", "涧西东区", "洛龙东区", "洛龙西区", "西工区", "老城区"];
      var data1 = {
        data: [30, 26, 28, 62, 28, 15],
        type: "bar"
      };
      var data2 = {
        data: [20, 14, 15, 55, 20, 10],
        type: "line"
      };
      var initData = {
        //需要给我传的数据
        xData: xData,
        yData: [data1, data2],
        legend: ["已收佣金", "应收佣金"],
        textColor: "white",
        linearColor: [
          //渐变颜色，
          {
            startColor: "#fec05f",
            endColor: "#ff7d4f"
          },
          {
            startColor: "rgba(248, 111, 57,1)",
            endColor: "rgba(248, 111, 57,0.2)"
          }
        ], //渐变色
        refName: "yjChart",
        returnOption: "yjChartOption",
        yAxisName: "佣金（元）",

        xAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        }
      };
      this.forEachFun(initData);
    },
    qyChart() {
      var xData = [
        "10-24周一",
        "10-25周二",
        "10-26周三",
        "10-27周四",
        "10-28周五",
        "10-29周六",
        "10-30周日"
      ];
      var data1 = {
        data: [30, 26, 28, 62, 28, 15, 10, 10],
        type: "bar"
      };
      var data2 = {
        data: [20, 14, 15, 55, 20, 10, 8, 8],
        type: "line"
      };
      var initData = {
        //需要给我传的数据
        xData: xData,
        yData: [data1, data2],
        legend: ["任务量", "完成率", "洋房"],
        textColor: "white",
        linearColor: [
          //渐变颜色，
          {
            startColor: "#fec05f",
            endColor: "#ff7d4f"
          },
          {
            startColor: "rgba(248, 111, 57,1)",
            endColor: "rgba(248, 111, 57,0.2)"
          }
        ], //渐变色
        refName: "qyChart",
        returnOption: "qyChartOption",
        yAxisName: "任务量(单)",
        yAxis: {
          name: "完成率",
          type: "value",
          nameLocation: "end",
          nameTextStyle: {
            color: "white"
          },
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "white"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "white"
            }
          }
        },
        xAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxisLine: {
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        }
      };
      this.forEachFun(initData);
    },
    //钢材类型
    steelTypeChart() {
      var data = [
        { value: 335, name: "武汉分公司", type: "pie" },
        { value: 310, name: "郑州分公司", type: "pie" },
        { value: 234, name: "西安分公司", type: "pie" },
        { value: 135, name: "洛阳分公司", type: "pie" }
      ];
      var initData = {
        //需要给我传的数据
        yData: [data],
        color: ["#0288d1", "#F5435F", "#F6AB52", "#01f9d3"],
        pieName: "库存",
        legend: ["盘螺", "螺纹", "钢坯", "线材"],
        refName: "steelTypeChart",
        returnOption: "steelTypeChartOption",
        textColor: "white",
        radius: ["80%", "50%"],
        center: "50%"
      };
      this.forEachFun(initData);
    },
    //厂家库存分布
    factoryStorckDistributeChart() {
      var xData = [
        "10-23周日",
        "10-24周一",
        "10-25周二",
        "10-26周三",
        "10-27周四",
        "10-28周五",
        "10-29周六"
      ];
      var data1 = {
        data: [30, 26, 28, 62, 28, 15, 10],
        type: "line"
      };
      var data2 = {
        data: [11, 22, 26, 33, 66, 88, 99],
        type: "line"
      };
      var data3 = {
        data: [12, 323, 44, 88, 66, 55, 33],
        type: "line"
      };
      var initData = {
        //需要给我传的数据
        xData: xData,
        yData: [data1, data2, data3],
        color: ["red", "green", "blue"],
        legend: ["资金周转率", "资金周转率1", "资金周转率2"],
        refName: "factoryStorckDistributeChart",
        returnOption: "factoryStorckDistributeChartOption",
        textColor: "white",
        xLine: {
          lineColor: "#262544" //x 轴线颜色
        },
        stack: "one" //堆叠图
      };
      this.forEachFun(initData);
    },
    //库存差价
    stockPriceChart() {
      var allData = {
        citys: [
          {
            name: "洛阳",
            value: [112.3995780944824, 34.62155444],
            symbolSize: 2,
            itemStyle: { normal: { color: "#FCA057" } }
          },
          {
            name: "无锡",
            value: [119.16, 34.59],
            symbolSize: 2,
            itemStyle: { normal: { color: "#FCA057" } }
          },
          {
            name: "西安",
            value: [108.5625, 34.153971],
            symbolSize: 2,
            itemStyle: { normal: { color: "#FCA057" } }
          },
          {
            name: "无锡",
            value: [119.16, 34.59],
            symbolSize: 2,
            itemStyle: { normal: { color: "#FCA057" } }
          }
        ],
        citys2: [
          {
            name: "郑州",
            value: [113.663221, 34.7568711],
            symbolSize: 2,
            itemStyle: { normal: { color: "#F58158" } }
          },
          {
            name: "上海",
            value: [121.48, 31.22],
            symbolSize: 2,
            itemStyle: { normal: { color: "#F5815" } }
          },
          {
            name: "上海",
            value: [121.48, 31.22],
            symbolSize: 2,
            itemStyle: { normal: { color: "#F5815" } }
          }
        ],

        moveLines: [
          {
            fromName: "洛阳",
            toName: "郑州",
            coords: [[112.3995780944824, 34.62155444], [113.663221, 34.7568711]]
          },
          {
            fromName: "无锡",
            toName: "上海",
            coords: [[119.16, 34.59], [121.48, 31.22]]
          },
          {
            fromName: "西安",
            toName: "上海",
            coords: [[108.5625, 34.153971], [121.48, 31.22]]
          }
        ]
      };
      var mapOption = {
        backgroundColor: "#252733",
        // title: {
        //   text: "厂家库存",
        //   left: "center",
        //   textStyle: {
        //     color: "#fff"
        //   }
        // },
        legend: {
          show: true,
          orient: "vertical",
          top: "bottom",
          left: "right",
          data: ["地点", "线路", "111"],
          textStyle: {
            color: "#fff"
          }
        },
        geo: {
          map: "china",
          // left: '10',
          right: "0%",
          zoom: 3,
          center: [117.98561551896913, 31.205000490896193],
          label: {
            emphasis: {
              show: false
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#262544",
              borderColor: "#404a59"
            },
            emphasis: {
              areaColor: "#252733"
            }
          }
        },
        tooltip: {
          trigger: "item"
        },
        series: [
          {
            name: "地点",
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              brushType: "fill",
              period: 5,
              scale: 15
            },
            label: {
              normal: {
                formatter: "{b}",
                // position: 'right',
                right: "20%",
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#f4e925",
                shadowBlur: 10,
                shadowColor: "#333"
              }
            },

            symbolSize: 3,
            showEffectOn: "render",
            data: allData.citys
          },

          {
            name: "线路",
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 2,
            large: true,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              color: "#fff",
              symbolSize: 4
            },
            lineStyle: {
              normal: {
                width: "",
                color: "#a6c84c",
                curveness: 0.2
              }
            },
            data: allData.moveLines
          }
        ]
      };
      var self = this;
      if (this.mapChart) {
        this.mapChart.clear();
        this.mapChart.dispose();
      }
      var self = this;
      setTimeout(() => {
        self.mapChart = echarts.init(
          document.getElementById("stockPriceChart")
        );
        self.mapChart.setOption(mapOption);
      }, 100);
    },
    //当选择完对比时间后
    onContrast() {
      this.$set(this, "showFiltBool", true);
    },
    selContrast() {
      this.contrast = !this.contrast;
      this.$set(this, "showFiltBool", this.contrast);
      if (this.contrastDate && this.contrast) {
        this.$set(this, "showFiltBool", true);
      } else {
        this.$set(this, "showFiltBool", false);
      }
    },
    dataSourceChange(val) {
      var a = this.defaultDataSourceType;
      this.fetchData();
    },
    changeType(value) {
      this.setHandleClick();
    },
    changeTime(value) {
      this.setHandleClick();
    },
    onFilter() {
      if (this.itemFactory.length > 1) {
        this.$set(this, "showFiltBool", true);
      }
      this.setHandleClick();
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      } else if (columnIndex === 5) {
        return {
          rowspan: 5,
          colspan: 1
        };
      }
    },

    factoryHaveMoneyChart() {
      var data = [
        { value: 335, name: "洛阳", selected: true },
        { value: 310, name: "合肥" },
        { value: 234, name: "西南" },
        { value: 135, name: "广州" },
        { value: 1548, name: "西安" },
        { value: 1548, name: "无锡" },
        { value: 1548, name: "武汉" },
        { value: 1548, name: "郑州" }
      ];
      var count = this.factoryHanveMoneyCount;
      var option = {
        color: [
          "#7553dc",
          "#5282e6",
          "#abdb9d",
          "#3eb37f",
          "#feca64",
          "#ff8548",
          "#fe6468",
          "#e371b7"
        ],
        title: {
          text: "应收账款800万元",
          x: "center",
          textStyle: {
            color: "white"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["洛阳", "合肥", "西南", "广州", "西安", "无锡", "武汉", "郑州"],
          textStyle: {
            color: "white"
          }
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            selectedMode: "single",
            selectedOffset: 20,
            radius: "80%",
            center: ["50%", "55%"],
            data: data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      var self = this;
      this.circulationChart(option, data, count, chart);
    },
    circulationChart(option, data, count, chart) {
      var self = this;
      var option = option;
      var data = data;
      var count = count;
      var r = count % data.length;
      option.series[0].data[r].selected = false;
      count += 1;
      var s = count % data.length;
      option.series[0].data[s].selected = true;
      self.$set(self, "factoryHanveMoneyCount", s + 1);
      setTimeout(() => {
        if (count === 1) {
          self.$set(
            self,
            "factoryHaveMoneyChartRote",
            echarts.init(document.getElementById("factoryHaveMoneyChart"))
          );
        }
        self.factoryHaveMoneyChartRote.setOption(option);
        self.circulationChart(option, data, count, chart);
      }, 1000);
    },
    moneyValueChart() {
      var data = [
        { value: 335, name: "武汉分公司", type: "pie" },
        { value: 310, name: "郑州分公司", type: "pie" },
        { value: 234, name: "西安分公司", type: "pie" },
        { value: 135, name: "洛阳分公司", type: "pie" },
        { value: 1548, name: "西南分公司", type: "pie" },
        { value: 333, name: "合肥分公司", type: "pie" }
      ];
      var initData = {
        //需要给我传的数据
        yData: [data],
        color: [
          "#7553dc",
          "#5282e6",
          "#abdb9d",
          "#3eb37f",
          "#feca64",
          "#ff8548",
          "#fe6468",
          "#e371b7"
        ],
        pieName: "资金周转率",
        legend: ["资金周转率11", "资金周转率22", "资金周转率33"],
        refName: "moneyValueChart",
        returnOption: "moneyValueChartOption",
        textColor: "white",
        radius: ["80%", "50%"],
        center: "50%"
      };
      this.forEachFun(initData);
    },
    clearSelArr() {
      this.$set(this, "itemFactory", []);
      this.$set(this, "showFiltBool", false);
    },
    setSaleOptionDataArr() {
      //多tabs图表   组装数据
      var xData = [
        "10-23周日",
        "10-24周一",
        "10-25周二",
        "10-26周三",
        "10-27周四",
        "10-28周五",
        "10-29周六"
      ];
      var data1 = {
        data: [30, 26, 28, 62, 28, 15, 10],
        type: "line"
      };
      var data2 = {
        data: [20, 14, 15, 55, 20, 10, 8],
        type: "line"
      };
      var data3 = {
        data: [50, 40, 30, 100, 40, 30, 20],
        type: "line"
      };
      var saleOptionDataArr = [
        {
          name: "0",
          label: "采购销售",
          xData: xData,
          legend: ["销量", "采购量"],
          yData: [data1, data2],
          refName: "table0", //ref
          textColor: "white",
          yAxisName: "万吨",
          // color: ["green", "blue", "yellow"],
          linearColor: [
            //渐变颜色，
            {
              startColor: "#fec05f",
              endColor: "#ff7d4f"
            },
            {
              startColor: "rgba(248, 111, 57,1)",
              endColor: "rgba(248, 111, 57,0.2)"
            }
          ], //渐变色
          xAxisLine: {
            axisLabel: {
              textStyle: {
                color: "white"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#262544"
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#262544"
              }
            }
          },
          yAxisLine: {
            axisLabel: {
              textStyle: {
                color: "white"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#262544"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#262544"
              }
            }
          },
          yAxis: {
            name: "万元",
            type: "value",
            nameLocation: "start",
            // inverse: true,
            nameTextStyle: {
              color: "#262544"
            },
            axisLabel: {
              textStyle: {
                color: "white"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#262544"
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#262544"
              }
            }
          }
        }
      ];
      this.initSeries(saleOptionDataArr);
    },
    //处理series
    initSeries(initData) {
      //多tabs图表   组装series
      var self = this;
      var tabChartsArr = self.$utils.returnTabChartsArr(initData);
      tabChartsArr.forEach((itemData, id) => {
        //返回option
        var itemData = this.$utils.returnTabsChartOption(itemData, id);
        this.$set(this.initDataArr, id, itemData);
      });
      this.setHandleClick();
    },
    setHandleClick(res) {
      //多tabs图表   重新实例化charts
      var self = this;
      // self.$set(self,'factoryHaveMoneyChartRote',echarts.init(document.getElementById('factoryHaveMoneyChart')))

      // this.stockPriceChart()
      if (res != undefined && res.index === "1") {
        this.qyChart();
        this.fbChart();
        this.yjChart();
        this.mdxlChart();
        this.qyxlChart();
      } else if (res != undefined && res.index === "3") {
        //钢圈网
        self.$refs.gangQuan.fetchData();
      } else if (res != undefined && res.index === "2") {
        this.stockPriceChart();
        this.kcChart();
        //钢材类型
        this.steelTypeChart();
      } else {
        	this.fetchData()
//      setTimeout(function() {
//        var ref = self.$refs["table" + self.activeName];
//        ref[0].initChart();
//      }, 0);
        //厂家库存分布
//      this.factoryStorckDistributeChart();
      }
    },
    //库存指标搜索过滤
    gcSearch() {},
    forEachFun(initData) {
      //处理数据生成Option
      var option = this.$utils.returnItemSeries(initData);
      // this[initData.returnOption] = option;
      this.$set(this, initData.returnOption, option);
      var self = this;
      setTimeout(function() {
        if (self.$refs[initData.refName][0]) {
          self.$refs[initData.refName][0].initChart();
        } else {
          self.$refs[initData.refName].initChart();
        }
      }, 0);
    },
    fetchData() {
      var self = this;
      if (self.factoryHaveMoneyChartRote) {
        self.factoryHaveMoneyChartRote.clear();
        self.factoryHaveMoneyChartRote.dispose();
      }
      self.kcChart();
      self.houseSumChart();
      self.sucessHouseChart();
      self.areaChart();
      self.areaMoneyChart();
      self.areaSuccessChart();
      self.newHouseChart();
      self.$set(this, "factoryHanveMoneyCount", 0);
      self.factoryHaveMoneyChart();

      // this.factoryHaveMoneyChart();
      this.stockPriceChart();
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>
<style>
.areaSuccessHouseRow{
  padding:1rem 2rem;
  float:left
}
.areaSuccessHouse{
  width:10px;height:10px;float:left;line-height:10
}
.areaSuccessHouseText{
  float: left;
    line-height: 10px;
    padding-left: 5px;
}
.haveMoneyBottom {
}
.itemHanveMoneyTop {
  width: 100%;
  color: aliceblue;
  margin-top: 9px;
}
.haveMoneyTop {
  flex-direction: row;
  display: flex;
  padding: 10px;
  align-items: center;
  justify-content: center;
  border: 1px solid gray;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding: 30px;
}
.haveMoney {
  padding: 20px;
}
.corcleCon {
  padding: 10px;
}
.corcleNum {
  width: 20px;
  height: 20px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  border-radius: 25px;
}
.tabsTextMargin {
  margin-left: 10px;
}

.tabsTextColor {
  color: white;
  margin-left: 10px;
}

.svgText {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 1rem;
  color: white;
  text-align: center;
}

.bigTitleCon {
  padding: 1em 0;
}

.iconHeadCon {
  text-align: center;
  width: 5em;
  height: 5em;
  border-radius: 50%;
}

.flexWarpCon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-top: 2em;
  padding: 0 0 30px 0;
}

.analysisCss .blockCon {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 10px;
  padding: 10px;
}
.saleNum {
  font-size: 1.2rem;
  padding: 10px 0 0 10px;
}

.card-con {
  display: flex;
  width: 100%;
  height: 5em;
  padding: 1em 0;
  border-radius: 5px;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}

.analysisCss .card-text-con {
  float: left;
  line-height: 2.5;
  text-align: center;
  padding: 0 8px;
}

.week-con {
  margin: 0.625rem;
}

.chart-container {
  display: block;
  /*background:#0D182B*/
}

.barCharts {
  width: 100%;
  height: 26.875rem;
}
.iconHeadConCss {
  /* width: 100%;
  height: 130px; */
  text-align: center;
}
.rowCon {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
}
.rowItem {
  display: flex;
  background: #262544;
  border-right: 1px solid #151531;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  color: white;
  width: 20%;
}
.flexRow {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.flexItem {
  width: 56px;
  background: #f6ad51;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
}
.factoryPostion {
}
.factoryClass {
  padding: 6px 11px;
  background: #151531;
  border-radius: 10px;
}
.factoryImg {
  width: 20px;
  height: 20px;
  margin: -5px;
}
.factoryImg:hover {
  cursor: pointer;
}
.factoryImgTop {
  transform: rotateZ(-180deg);
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.factoryImgDown {
  transition: transform 0.3s, -webkit-transform 0.3s;
  transform: rotateZ(0deg);
}
.secFactory {
  background: #1b1f28;
  padding-left: 57px;
  width: 100%;
}
.zTopTitleHead {
  float: left;
  color: white;
  font-size: 20px;
  padding: 17px;
}
.analysisCss {
  color: white;
}
/* select 选择框样式 */
.analysisCss .el-input__inner {
  border: 2px solid #f6ad51;
  color: #f6ad51;
}
.analysisCss .el-input__icon {
  color: #f6ad51;
}
.el-select-dropdown__item.selected {
  color: white;
  background: #f6ad51;
}
.el-select-dropdown__item.selected.hover {
  color: white;
  background: #f6ad51;
}
.el-select-dropdown {
  background: transparent;
  box-shadow: 0 2px 6px #f6ad51;
}
.el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #f6ad51;
}
.el-popper[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: #f6ad51;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover,
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #9d724b;
  color: white;
}
.el-select:hover .el-input__inner {
  border-color: #f6ad51;
}
.el-select .el-input .el-select__caret {
  color: #f6ad51;
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: #f6ad51;
}
.factoryTabClass
  .el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item.is-active {
  background: #3b8dee;
}
.factoryTabClass .el-tabs--border-card {
  background: #262544;
}
.factoryTabClass .el-tabs__item {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.factoryTabClass .el-tabs__nav-wrap {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.factoryTabClass .el-tabs--border-card > .el-tabs__header {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.myTabClass .factoryTabClass .el-tabs__nav-scroll {
  background: #262544;
  margin-bottom: 0;
}
.factoryTabClass .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  border-right: 1px solid #151531;
  color: white;
}
.factoryTabClass .el-tabs__content {
  background: #262544;
  padding: 0;
}

.factoryMoneyAssetTurnover .blueHeader {
  background: #3b8dee;
  text-align: center;
}
.factoryMoneyAssetTurnover .el-table--border th,
.el-table__fixed-right-patch {
  border-bottom: 1px solid #2f3543;
}
.factoryMoneyAssetTurnover .el-table thead.is-group th {
  background: #3b8dee;
}
.factoryMoneyAssetTurnover .el-table__footer-wrapper thead div,
.el-table__header-wrapper thead div {
  /* background: #0386D1; */
}
.factoryMoneyAssetTurnover .el-table tr {
  background: #262544;
}
.factoryMoneyAssetTurnover .el-table__body-wrapper {
  background: #262544;
}
.factoryMoneyAssetTurnover .el-table th {
  background: #3b8dee;
}
.myTabClass .el-tabs--card > .el-tabs__header .el-tabs__item {
  display: inline-table;
}
.myClassName .el-radio-button__inner {
     background: transparent; 
     border: 1px solid #216BCE !important; 
     margin: 5px;
     padding: 14px 20px;
     border-radius: 8px;
     color: white; 
}
.myClassName .el-radio-button:first-child .el-radio-button__inner {
    border: 1px solid #216BCE !important;
    border-radius: 8px !important;
    /* border-radius: 4px 0 0 4px; */
    -webkit-box-shadow: none!important;
    /* box-shadow: none!important; */
}
.myClassName .el-radio-button:last-child .el-radio-button__inner {
    border: 1px solid #216BCE !important;
    border-radius: 8px !important;
    /* border-radius: 4px 0 0 4px; */
    -webkit-box-shadow: none!important;
    /* box-shadow: none!important; */
}
.myClassName .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background: #216BCE !important;
    -webkit-box-shadow: -1px 0 0 0 transparent !important;
    box-shadow: -1px 0 0 0 transparent !important;
    color: white !important;
}
</style>

